<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>运动会</title>

    <link href="/css/common.css" rel="stylesheet">
    <link href="/css/index.css" rel="stylesheet">

    <% include common/main-lib.ejs %>
</head>
<body>

<div id="app">
  <el-container>
    <el-header>
      <% include common/header.ejs %>
    </el-header>
    <el-container>
      <el-container>
        <el-main>
          <h2>我的信息</h2>
          <el-row type="flex" class="row-bg" justify="space-around">
            <el-table
              :data="[player]"
              style="width: 100%"
              :default-sort = "{prop: 'date', order: 'descending'}"
            >
              <el-table-column
                prop="playerId"
                label="学号"
                fixed>
              </el-table-column>
              <el-table-column
                prop="playerName"
                label="姓名"
                fixed>
              </el-table-column>
              <el-table-column
                prop="playerSex"
                label="性别">
              </el-table-column>
              <el-table-column
                prop="playerClass"
                label="班级">
              </el-table-column>
              <el-table-column
                prop="playerPhone"
                label="电话">
              </el-table-column>
              <el-table-column
                prop="trackEventName"
                label="径赛">
              </el-table-column>
              <el-table-column
                prop="fieldEventName"
                label="田赛">
              </el-table-column>
            </el-table>
          </el-row>
          <h2>我的比赛安排</h2>
          <el-row type="flex" class="row-bg" justify="space-around">
            <el-table
              :data="playerArranges"
              style="width: 100%"
              :default-sort = "{prop: 'date', order: 'descending'}"
            >

              <el-table-column
                type="index"
              >
              </el-table-column>
              <el-table-column
                prop="gameInfo.gameName"
                label="名称"
              >
              </el-table-column>
              <el-table-column
                prop="gameInfo.gameField"
                label="比赛场地"
                width="160"
              >
              </el-table-column>
              <el-table-column
                prop="gameInfo.ready"
                label="检录"
                width="60"
              >
              </el-table-column>
              <el-table-column
                prop="gameInfo.judgeName"
                label="裁判"
                width="100"
              >
              </el-table-column>
              <el-table-column
                prop="gameInfo.time0"
                label="初赛日期"
                sortable>
              </el-table-column>
              <el-table-column
                prop="gameInfo.time1"
                label="决赛日期"
                sortable>
              </el-table-column>

              <el-table-column type="expand" label="分组" width="200">
                <template slot-scope="props">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="分组人数">
                      <span>{{ props.row.gameInfo.groupNum }}</span>
                    </el-form-item>
                    <el-form-item label="备注">
                      <span>{{ props.row.gameInfo.desc }}</span>
                    </el-form-item>
                  </el-form>
                  <div  class="innerTableWrap">
                    <div class="innerTableCard" v-for="(item, index) in props.row.arrangeGroup">
                      <h3>第{{index + 1}}组</h3>
                      <el-table
                        :data="item"
                        style="width: 300px">
                        <el-table-column
                          type="index"
                          label="赛道/序号"
                          width="90px"
                          align="center">
                        </el-table-column>
                        <el-table-column
                          prop="playerName"
                          label="姓名">
                        </el-table-column>
                        <el-table-column
                          prop="playerId"
                          label="号码">
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <h2>我的比赛结果</h2>
          <el-row type="flex" class="row-bg" justify="space-around">
            <el-table
              :data="playerScores"
              style="width: 100%"
              :default-sort = "{prop: 'date', order: 'descending'}"
            >

              <el-table-column
                type="index"
              >
              </el-table-column>
              <el-table-column
                prop="gameName"
                label="名称"
              >
              </el-table-column>
              <el-table-column
                prop="gameField"
                label="比赛场地"
                width="160"
              >
              </el-table-column>


              <el-table-column
                prop="score"
                label="结果">
              </el-table-column>
            </el-table>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
    <el-footer>田径运动会管理系统</el-footer>
  </el-container>
</div>

<script>
  new Vue({
    el: '#app',
    data () {
      return {
        playerId: "<%= userId %>",  // 当前登录用户ID
        player: {},  // 当前登录用户信息
        playerArranges: [],  // 当前登录用户比赛安排
        playerScores: [],  // 当前登录用户比赛结果
        arranges: [],
        arrangeList: [],
        scoreList: [],
        players: [],
        playerList: [],
        judgeList: []
      }
    },
    methods: {
      id2name_judge(id) {
        let name = "";
        this.judgeList.forEach(e => {
          if (e.judgeId === id) {
            name = e.judgeName;
          }
        })
        return name;
      },
      id2score_event(id) {
        let name = "";
        this.eventList.forEach(e => {
          if (e.eventId === id) {
            name = e.eventName;
          }
        })
        return name;
      },
      id2score_fe(playerId, fieldEvent) {
        let score = "";
        this.scoreList.forEach(e => {
          if (e.fieldEvent === fieldEvent && e.playerId === playerId) {
            score = e.score;
          }
        })
        return score;
      },
      id2score_te(playerId, trackEvent) {
        let score = "";
        this.scoreList.forEach(e => {
          if (e.trackEvent === trackEvent && e.playerId === playerId) {
            score = e.score;
          }
        })
        return score;
      },
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      },
      getArrangeList() {
        return axios.get('/list/arrange');
      },
      getScoreList() {
        return axios.get('/list/score');
      },
      getPlayerList() {
        return axios.get('/list/player');
      },
      getJudgeList() {
        return axios.get('/list/judge');
      },
      getEventList() {
        return axios.get('/list/event');
      },
      toJudgeList(response) {
        if (response.data.status === 200) {
          this.judgeList = response.data.data;
        } else {
          console.log(error)
          this.$alert('服务器错误，请稍后重试', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
      },
      toPlayerList(response) {
        if (response.data.status === 200) {
          this.playerList = response.data.data;
        } else {
          console.log(error)
          this.$alert('服务器错误，请稍后重试', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
      },
      toEventList(response) {
        if (response.data.status === 200) {
          this.eventList = response.data.data;
        } else {
          console.log(error)
          this.$alert('服务器错误，请稍后重试', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
      },
      toArrangeList(response) {
        if (response.data.status === 200) {
          this.arrangeList = response.data.data;
        } else {
          console.log(error)
          this.$alert('服务器错误，请稍后重试', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
      },
      toScoreList(response) {
        if (response.data.status === 200) {
          this.scoreList = response.data.data;
        } else {
          console.log(error)
          this.$alert('服务器错误，请稍后重试', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
      },
      toPlayers() {
        let _this = this;

        let playerList = JSON.parse(JSON.stringify(this.playerList))

        this.players = playerList.map(e => {
          return Object.assign(e, {
            playerSex: e.playerSex === "0" ? "女" : "男",
            trackEventName: _this.id2score_event(e.trackEvent),
            fieldEventName: _this.id2score_event(e.fieldEvent)
          })
        })
      },
      toArranges() {
        let _this = this;
        this.arranges = this.arrangeList.map(e => {
          e.gameInfo.judgeName = _this.id2name_judge(e.gameInfo.judgeId)
          e.gameInfo.ready = e.gameInfo.ready ? "是" : "否"
          e.gameInfo.desc = e.gameInfo.desc ?  e.gameInfo.desc : "无"
          return e
        })

        // console.log(this.arranges)
      },
      toPlayer() {
        this.players.forEach(e => {
          if (e.playerId === this.playerId) {
            this.player = e
          }
        })
      },
      toPlayerArranges() {
        let _this = this;
        this.arranges.forEach(e => {
          e.arrangeGroup.forEach(e1 => {
            e1.forEach(e2 => {
              if (e2.playerId === _this.playerId) {
                _this.playerArranges.push(e)
              }
            })
          })
        })
      },
      toPlayerScores() {
        let _this = this;
        let playerArranges = JSON.parse(JSON.stringify(this.playerArranges));
        playerArranges.forEach(e => {
          if (e.gameInfo.gameType === "te") {
            let score = _this.id2score_te(_this.player.playerId, _this.player.trackEvent);
            console.log(score)
            _this.playerScores.push(Object.assign(e.gameInfo, { score }))
          } else if (e.gameInfo.gameType === "fe") {
            let score = _this.id2score_fe(_this.player.playerId, _this.player.fieldEvent);
            console.log(score)
            _this.playerScores.push(Object.assign(e.gameInfo, { score }))
          }
        })
      }
    },
    created() {
      let _this = this;
      axios.all([_this.getArrangeList(), _this.getScoreList(), _this.getPlayerList(), _this.getJudgeList(), _this.getEventList()])
        .then(axios.spread(function (arrangeList, scoreList, playerList, judgeList, eventList) {
          _this.toArrangeList(arrangeList);
          _this.toScoreList(scoreList);
          _this.toPlayerList(playerList);
          _this.toJudgeList(judgeList);
          _this.toEventList(eventList);

          _this.toPlayers();
          _this.toArranges();

          _this.toPlayer();
          _this.toPlayerArranges();
          _this.toPlayerScores();
        }));
    }
  })
</script>
</body>
</html>
